<!-- IE_outerHtml.htm
Данная страничка должна запускаться как контекстное меню Internet Explorer.
Пункт меню для вызова этой страницы настраивается скриптом - "IE_outerHtml_setup.vbs". 

Перед запуском пункта меню - текстовый/блочный элемент до вызова меню по ПКМ должен быть выделен на странице, 
на INPUT-элементе управления достаточного лишь ПКМ.

Возможности скрипта:
 - выполняет вывод информации о родительском элементе элементов выделения на вызывавшем окне (outerHtml);
 - позволяет получить список properties / attributes элемента;
 - позволяет сменить просматриваемый элемент на любой объект-родитель либо перейти к выбранному элементу-потомку;
 - позволяет отфильтровать в отдельный список узлы/теги по указываемому признаку, выполнить переход на узлел из списка;
 - позволяет выполнить переход к объекту по указанному его `id` или индексу; переход на предыдущий/следующий индекс;
 - позволяет ввести и выполнить свои javascript-команды применительно к объектам вызвавшего окна.
 - позволяет вносить изменения в стиль элемента выбором цветов фона/символов, выбор имени шрифта и установка размера;

25.07.2014 (c) Roman, rgv15@list.ru

site:
https://sites.google.com/site/scripttools/home/context-menu-for-ie/ie_outerhtml

repositary:
https://code.google.com/p/small-scripts/source/browse/#hg%2FIE_outerHtml

direct link last version:
https://small-scripts.googlecode.com/hg/IE_outerHtml/IE_outerHtml.htm
-->

<html style="width: 700px; height: 790px; margin: 10px; status:1">

<head>
<title>IE_outerHtml [v2.0]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="rgv15@list.ru">
<meta name="Description" content="view outerHTML of selected elements">
</head>

<!-- ========================================= HTML ===========================================  -->

<BODY BGCOLOR="snow" onload="Window_OnLoad();" style="{font-family: Arial; font-size: 11; text-align:center}" onload="getFonts()">

<!-- ***** таблица выбора объекта - предка/потомка -->

<table width="100%" cellpadding="0" cellspacing="0" border="1" style="{font-family: Arial; font-size: 11;  BACKGROUND: oldlace;}" id="tbl___Nodes">
	<tr>
		<td colspan="6" align="center" 
			style="font-style:italic; font-weight: bold;">
			Nodes</td>
	</tr>
	<tr>
		<td>Current/Parents</td>
		<td colspan="5">
			<select id="id_slParents" 
				style="{font-family: Arial; font-size: 11; BACKGROUND: ivory}" 
				title="Выбор элемента из списка родительских элементов текущего"
				onchange="ue_changedParent();"
				>
				<option value="---">
				___ select parentElement ________________________________________________________________</option>
			</select>
			<input type="button" value="@" style="FONT-SIZE: 13px; FONT-FAMILY: Webdings; height: 24px; " 
				title="Пересоздать список предков, начиная от текущего узла"
				onclick="if (confirm('Подтвердите пересоздание списка `предков`, начиная от текущего элемента')) uf_createParentOptions();"
			>
			</td>
	</tr>
	<tr>
		<td>Childs <span style="font-style:italic; font-weight: bold;" title="Количество узлов-потомков"><span id="idSpn_NumberOfChilds">0</span>&nbsp;nodes</span></td>
		<td colspan="5">
			<select id="id_slChilds" 
				style="{font-family: Arial; font-size: 11; BACKGROUND: ivory}" 
				title="Выбор элемента из списка дочерних элементов текущего"
				onchange="ue_changedChild();"
				>
				<option value="---">
				___ select childNode ____________________________________________________________________</option>
			</select></td>
	</tr>
	<tr>
		<td colspan="6"  style="" align="center">
			<label title='Отобразить/скрыть раздел поиска объекта' style="font-weight: bold;"> 
				<input type="checkbox" onclick='
					if (this.checked) { idDiv_expanFinding.style.display="block"; if (id_slNodeName.length==1) uf_createNodeNameOptions() } else idDiv_expanFinding.style.display="none";
					' />
				Object Search
			</label>
			<div id="idDiv_expanFinding" style="display:none;">
			<table width="100%" cellpadding="5" cellspacing="0" border="0" 
				style="font-family: Arial; font-size: 11; background: lightgray;">
				<tr>
					<td align="right">
					<fieldset>
						<legend> Set Filter </legend>
						{node}<b>.nodeName</b>
						<select id="id_slNodeName" style="{font-family: Arial; font-size: 11; background: whitesmoke;}" 
						onchange="ue_changedFilter(this.id, this.value)" title="Выбор значения имени узла `nodeName` [+ `.type`, если есть] для фильтрации имеющихся в документе узлов">
							<option value="">___ selection of existing node names ________</option>
						</select>
						<br>
						{tag}<b>.name</b>
						<select id="id_slObjName" style="{font-family: Arial; font-size: 11; background: whitesmoke;}" 
						onchange="ue_changedFilter(this.id, this.value)" title="Выбор значения имени элемента `name` для фильтрации имеющихся в документе tag-элементов">
							<option value="">___ selection of the existing element names ___</option>
						</select>
					</fieldset>
					</td>
					<td align="right">
					<fieldset>
						<legend> Go to </legend>
						{node}<b>.id</b> 
						<input type="text" id="id_tNodeId" size="10" value="" 
							style="{font-family: Arial; font-size: 11; background: whitesmoke;}"
							onkeypress="if (window.event.keyCode==13) idBt_gotoId.onclick();" 
							title='`id` объекта для перехода. &#13;Клавиша <Enter> - запуск команды "Go"' >
						<input type="button" value="Go" id="idBt_gotoId" style="{font-family: Arial; font-size: 11;}"
							onclick="var ID=id_tNodeId.value; if (ID) 
								{var obj=doc.getElementById(ID); if(obj) 
								{elem=obj; id_slParents.selectedIndex =0; id_taLog.value += '[go to `id`] ' + ID +'\n'; view_dataTag();}
								else alert('node is not received') }"
							title="Переход к указанному `id`"
						>
						<br>
						{node}<b>.sourceIndex</b>
						<input type="text" id="id_tSrcIdx" size="10" value="" 
							style="{font-family: Arial; font-size: 11; background: whitesmoke;}"
							onkeypress="if (window.event.keyCode==13) idBt_gotoSrcIdx.onclick();" 
							title='`sourceIndex` объекта для перехода. &#13;Клавиша <Enter> - запуск команды "Go"' >
						<input type="button" value="Go" id="idBt_gotoSrcIdx" style="{font-family: Arial; font-size: 11;}"
							onclick="var Idx=id_tSrcIdx.value; var obj=doc.all[Idx]; if(obj) 
								{elem=obj; id_slParents.selectedIndex =0; id_taLog.value += '[go to `sourceIndex`] ' + Idx +'\n'; view_dataTag();} 
								else alert('node is not received')"
							title="Переход к указанному `sourceIndex`"
						>
					</fieldset>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center" style="font-style:italic; font-weight: bold;">
						<span id="idSpn_NumberOfFilteredNodes" >0</span> nodes:
						<select id="id_slFilteredNodes" style="{font-family: Arial; font-size: 11; background: whitesmoke;}" 
							title="Просмотр списка отфильрованных узлов и переход к выбранному объекту"
							onchange="var Idx=this.value; if (Idx) { elem=doc.all[Idx]; id_slParents.selectedIndex=0; view_dataTag(); }">
							<option value="">
							___ node selection list of filtered nodes ___________________________________________________</option>
						</select>
						<br>
						<br>
					</td>
				</tr>
			</table>
			</div id="idDiv_expandFinding">
		</td>
	</tr>
</table>

<BR>

<!-- ***** таблица отображения аттрибутов элемента, правки стиля -->

<div id="div__tblAttributes" style="BACKGROUND: lemonchiffon; ">

<table cellpadding="0" cellspacing="0" border="1" width="660px" style="{font-family: Arial; font-size: 12; }" id="tbl___Attributes">
	<tr>
		<td colspan="3" align="center" style="font-style:italic; font-weight: bold;">Properties of object `elem`</td>
		<td align="center">
			<input type="button" value="prev" style="{font-family: Arial; font-size: 11;}" title="Переход к узлу с предыдущим номер индекса `sourceIndex`"
				onclick='
					var Idx=elem.sourceIndex - 1; if (doc.all[Idx]) { 
						elem=doc.all[Idx]; id_taLog.value += "[go to PREV `sourceIndex`] " + Idx +"\n"; id_slParents.selectedIndex =0; view_dataTag();
						} else alert("not available");
					'>
			<input type="button" value="next" style="{font-family: Arial; font-size: 11;}" title="Переход к узлу со следующим номером индекса `sourceIndex`"
				onclick='
					var Idx=elem.sourceIndex + 1; if (doc.all[Idx]) { 
						elem=doc.all[Idx]; id_taLog.value += "[go to NEXT `sourceIndex`] " + Idx +"\n"; id_slParents.selectedIndex =0; view_dataTag();
						} else alert("not available");
					'>
		</td>
		<td id="idElem_idx_current" align="center" style="color: blue; font-Weight: bold; " title="Значение свойства elem.sourceIndex (если имеется)">*</td>
		<td id="idElem_tagName" align="center" style="color: blue;" title="Значение свойства elem.nodeName (добавлен '.type', если имеется)">*</td>
	</tr>
	<tr>
		<td align="center">.id</td>
		<td align="center">
			<input type="button" value="+" style="FONT-SIZE: 14px; FONT-FAMILY: Wingdings 2" title="Скопировать значение в буффер клавиатуры"
				onclick='window.clipboardData.setData("Text", idElem_id.innerText);'> 
			</td>
		<td  style="color: blue; font-weight: bold; " width="55%" title="Значение свойства elem.id"><div id="idElem_id" style="width:410px; height:33px; max-height:50px; overflow: auto;">*</div></td>
		
		<!-- ********************** parentNode *************************** -->
		<td align="center"  title='Переход к узлу `elem.parentNode`'>
			<input type="button" id="idBt_gotoParentNode" value="parentNode"  style="{font-family: Arial; font-size: 11; color: maroon;}"
				onclick='
					if (id_slParents.selectedIndex>1) {
						id_slParents.selectedIndex -= 1; id_slParents.onchange();
					} else { /*текущий элемент не из списка id_slParents, проверка возможности перехода на elem.parentNode */
						var obj=elem.parentNode; 
						if (obj) { elem=obj; view_dataTag(); } else alert("node is not received")
					}
				'
			>
		</td>
		<td id="idElem_idx_parent" align="center" style="color: maroon;" title="Значение свойства elem.parentNode.sourceIndex (если имеется)">*</td>
		<td id="idElem_parentNode" align="center" style="color: maroon;" title='Имя узла `elem.parentNode.nodeName`&#13;&#13; и [elem.parentNode.id], если есть id'>*</td>
	<tr>
		<td align="center">.title</td>
		<td align="center">
			<input type="button" value="+" style="FONT-SIZE: 14px; FONT-FAMILY: Wingdings 2" title="Скопировать значение в буффер клавиатуры"
				onclick='window.clipboardData.setData("Text", idElem_title.innerText);'> 
			</td>
		<td colspan="4" id="idElem_title" style="color: blue;" title='Значение свойства elem.title'>*</td>
	</tr>
	<tr style="{font-family: Arial; font-size: 11;}">
		<td align="center">.name</td>
		<td align="center">
				<input type="button" value="+" style="FONT-SIZE: 14px; FONT-FAMILY: Wingdings 2" title="Скопировать значение в буффер клавиатуры"
					onclick='window.clipboardData.setData("Text", idTd_Name.innerText);'> 
			</td>
		<td id="idTd_Name" colspan="4" style="color: blue; font-weight: bold;" title="Значение `name`">*</td>
	</tr>
	<tr style="{font-family: Arial; font-size: 11;}">
		<td colspan="7" align="center" style="font-style:italic;">
			<input type=button id="id_btViewProp" value="View all properties" 
				onclick="
					var txt = ''; for (var propertyName in elem) { 
						var val=elem[propertyName];
						if ((val) && (val!='null')) txt += '\t'+propertyName + ' = ' + val + '~|~';
					} 
					var arr1 = txt.split('~|~'); arr1.sort(); txt=arr1.join('\n');
					uf_openModelles('view properties (without null/blank)&lt;BR&gt;' + id_slParents[id_slParents.selectedIndex].text,txt);" 
				style="{font-family: Arial; font-size: 11;}" 
				title="Просмотр списка всех непустых свойств объекта (в ModellesDialog)">
			<select id="id_slPropObject" style="{font-family: Arial; font-size: 11; BACKGROUND: lemonchiffon}" onchange="ue_changedProp();"
				title="Выбор свойств объекта, самих являющихся объектами (смена выбора - запрос данных)"> 
				<option value="---">___ select property for view ___</option>
			</select>
			<input type=button id="id_btViewAttr" value="View all attributes" 
				onclick="
					var txt = ''; for (var i = 0; i<elem.attributes.length; i++) 
					{ var val=elem.attributes[i].value;
						if ((val) && (val!='null')) txt=txt+'\t'+elem.attributes[i].name + ' = ' + val + ' ~|~';
					}
					var arr1 = txt.split('~|~'); arr1.sort(); txt=arr1.join('\n');
					uf_openModelles('view attributes (without null/blank) - ' + elem.nodeName,txt);" 
				style="{font-family: Arial; font-size: 11;}" 
				title="Просмотр списка всех непустых значений аттрибутов элемента (в ModellesDialog)">
		</td>
	</tr>
</table>
</div>

<!-- ===== просмтор/редактирование `elem.outerHTML` -->
<p id="p___OuterHtml">
	elem.outerHTML
	<textarea rows="10" cols="90" id="id_editorOuter" style="background: Snow; color: MidnightBlue; font-Size: 11px; font-Family: Lucida Console;"></textarea>
	<hr>
</p>

<!-- ===== Слой редактирования style  -->

<div id="idDiv___editorStyle" style="background: gainsboro;">

<label title='Отобразить/скрыть раздел настройки стиля элемента'> 
	<input type="checkbox" onclick='if (this.checked) idDiv_expandEditor.style.display="block"; else idDiv_expandEditor.style.display="none";' />
	<b>Setting the style of the current element</b>
	<hr>
</label>

<!-- Слой с меняющимся стилем `display:` - содержит сам редактор -->
<div id="idDiv_expandEditor" style="display:none">

<!-- Смена цветов элемента. innerHTML этого DIV буудет задвоен для дублирования SELECT-а выбора цвета -->
<div id="idDiv_colorSelects">
<span id="idSpn_slBgColor" width="50%">
Bg-color:
<select style="{font-size: 11; }" id="id_slBgColor" onchange="ue_changed_slBgColor();" title="Выбор цвета для смены.&#13;&#13;Переход к самой верхней позиции -- удаление данного свойства у элемента"">
  <option selected> ___select_background-color_name___ </option>
  <option style="background-color: Black; color:#fff">Black|#000000</option>
  <option style="background-color: Navy; color:#fff">Navy|#000080</option>
  <option style="background-color: DarkBlue; color:#fff">DarkBlue|#00008B</option>
  <option style="background-color: MediumBlue; color:#fff">MediumBlue|#0000CD</option>
  <option style="background-color: Blue; color:#fff">Blue|#0000FF</option>
  <option style="background-color: DarkGreen; color:#fff">DarkGreen|#006400</option>
  <option style="background-color: Green; color:#fff">Green|#008000</option>
  <option style="background-color: Teal; color:#fff">Teal|#008080</option>
  <option style="background-color: DarkCyan; color:#fff">DarkCyan|#008B8B</option>
  <option style="background-color: DeepSkyBlue; color:#fff">DeepSkyBlue|#00BFFF</option>
  <option style="background-color: DarkTurquoise; color:#fff">DarkTurquoise|#00CED1</option>
  <option style="background-color: MediumSpringGreen; color:#000">MediumSpringGreen|#00FA9A</option>
  <option style="background-color: Lime; color:#000">Lime|#00FF00</option>
  <option style="background-color: SpringGreen; color:#000">SpringGreen|#00FF7F</option>
  <option style="background-color: Aqua; color:#000">Aqua|#00FFFF</option>
  <option style="background-color: Cyan; color:#000">Cyan|#00FFFF</option>
  <option style="background-color: MidnightBlue; color:#fff">MidnightBlue|#191970</option>
  <option style="background-color: DodgerBlue; color:#fff">DodgerBlue|#1E90FF</option>
  <option style="background-color: LightSeaGreen; color:#fff">LightSeaGreen|#20B2AA</option>
  <option style="background-color: ForestGreen; color:#fff">ForestGreen| 	#228B22</option>
  <option style="background-color: SeaGreen; color:#fff">SeaGreen|#2E8B57</option>
  <option style="background-color: DarkSlateGray; color:#fff">DarkSlateGray|#2F4F4F</option>
  <option style="background-color: LimeGreen; color:#fff">LimeGreen|#32CD32</option>
  <option style="background-color: MediumSeaGreen; color:#fff">MediumSeaGreen| 	#3CB371</option>
  <option style="background-color: Turquoise; color:#000">Turquoise|#40E0D0</option>
  <option style="background-color: RoyalBlue; color:#fff">RoyalBlue|#4169E1</option>
  <option style="background-color: SteelBlue; color:#fff">SteelBlue|#4682B4</option>
  <option style="background-color: DarkSlateBlue; color:#fff">DarkSlateBlue|#483D8B</option>
  <option style="background-color: MediumTurquoise; color:#000">MediumTurquoise|#48D1CC</option>
  <option style="background-color: Indigo; color:#fff">Indigo|#4B0082</option>
  <option style="background-color: DarkOliveGreen; color:#fff">DarkOliveGreen|#556B2F</option>
  <option style="background-color: CadetBlue; color:#fff">CadetBlue|#5F9EA0</option>
  <option style="background-color: CornflowerBlue; color:#000">CornflowerBlue|#6495ED</option>
  <option style="background-color: MediumAquaMarine; color:#000">MediumAquaMarine|#66CDAA</option>
  <option style="background-color: DimGray; color:#fff">DimGray|#696969</option>
  <option style="background-color: SlateBlue; color:#fff">SlateBlue|#6A5ACD</option>
  <option style="background-color: OliveDrab; color:#fff">OliveDrab|#6B8E23</option>
  <option style="background-color: SlateGray; color:#fff">SlateGray|#708090</option>
  <option style="background-color: LightSlateGray; color:#fff">LightSlateGray|#778899</option>
  <option style="background-color: MediumSlateBlue; color:#fff">MediumSlateBlue|#7B68EE</option>
  <option style="background-color: LawnGreen; color:#000">LawnGreen|#7CFC00</option>
  <option style="background-color: Chartreuse; color:#000">Chartreuse|#7FFF00</option>
  <option style="background-color: Aquamarine; color:#000">Aquamarine|#7FFFD4</option>
  <option style="background-color: Maroon; color:#fff">Maroon|#800000</option>
  <option style="background-color: Purple; color:#fff">Purple|#800080</option>
  <option style="background-color: Olive; color:#fff">Olive|#808000</option>
  <option style="background-color: Gray; color:#000">Gray|#808080</option>
  <option style="background-color: SkyBlue; color:#000">SkyBlue|#87CEEB</option>
  <option style="background-color: LightSkyBlue; color:#000">LightSkyBlue|#87CEFA</option>
  <option style="background-color: BlueViolet; color:#fff">BlueViolet|#8A2BE2</option>
  <option style="background-color: DarkRed; color:#fff">DarkRed|#8B0000</option>
  <option style="background-color: DarkMagenta; color:#fff">DarkMagenta|#8B008B</option>
  <option style="background-color: SaddleBrown; color:#fff">SaddleBrown|#8B4513</option>
  <option style="background-color: DarkSeaGreen; color:#000">DarkSeaGreen|#8FBC8F</option>
  <option style="background-color: LightGreen; color:#000">LightGreen|#90EE90</option>
  <option style="background-color: MediumPurple; color:#000">MediumPurple|#9370DB</option>
  <option style="background-color: DarkViolet; color:#fff">DarkViolet|#9400D3</option>
  <option style="background-color: PaleGreen; color:#000">PaleGreen|#98FB98</option>
  <option style="background-color: DarkOrchid; color:#fff">DarkOrchid|#9932CC</option>
  <option style="background-color: YellowGreen; color:#000">YellowGreen|#9ACD32</option>
  <option style="background-color: Sienna; color:#fff">Sienna|#A0522D</option>
  <option style="background-color: Brown; color:#fff">Brown|#A52A2A</option>
  <option style="background-color: DarkGray; color:#000">DarkGray|#A9A9A9</option>
  <option style="background-color: LightBlue; color:#000">LightBlue|#ADD8E6</option>
  <option style="background-color: GreenYellow; color:#000">GreenYellow|#ADFF2F</option>
  <option style="background-color: PaleTurquoise; color:#000">PaleTurquoise|#AFEEEE</option>
  <option style="background-color: LightSteelBlue; color:#000">LightSteelBlue|#B0C4DE</option>
  <option style="background-color: PowderBlue; color:#000">PowderBlue|#B0E0E6</option>
  <option style="background-color: FireBrick; color:#fff">FireBrick|#B22222</option>
  <option style="background-color: DarkGoldenRod; color:#000">DarkGoldenRod|#B8860B</option>
  <option style="background-color: MediumOrchid; color:#000">MediumOrchid|#BA55D3</option>
  <option style="background-color: RosyBrown; color:#000">RosyBrown|#BC8F8F</option>
  <option style="background-color: DarkKhaki; color:#000">DarkKhaki|#BDB76B</option>
  <option style="background-color: Silver; color:#000">Silver|#C0C0C0</option>
  <option style="background-color: MediumVioletRed; color:#fff">MediumVioletRed|#C71585</option>
  <option style="background-color: IndianRed; color:#000">IndianRed|#CD5C5C</option>
  <option style="background-color: Peru; color:#000">Peru|#CD853F</option>
  <option style="background-color: Chocolate; color:#000">Chocolate|#D2691E</option>
  <option style="background-color: Tan; color:#000">Tan|#D2B48C</option>
  <option style="background-color: LightGray; color:#000">LightGray|#D3D3D3</option>
  <option style="background-color: Thistle; color:#000">Thistle|#D8BFD8</option>
  <option style="background-color: Orchid; color:#000">Orchid|#DA70D6</option>
  <option style="background-color: GoldenRod; color:#000">GoldenRod|#DAA520</option>
  <option style="background-color: PaleVioletRed; color:#000">PaleVioletRed|#DB7093</option>
  <option style="background-color: Crimson; color:#fff">Crimson|#DC143C</option>
  <option style="background-color: Gainsboro; color:#000">Gainsboro|#DCDCDC</option>
  <option style="background-color: Plum; color:#000">Plum|#DDA0DD</option>
  <option style="background-color: BurlyWood; color:#000">BurlyWood|#DEB887</option>
  <option style="background-color: LightCyan; color:#000">LightCyan|#E0FFFF</option>
  <option style="background-color: Lavender; color:#000">Lavender|#E6E6FA</option>
  <option style="background-color: DarkSalmon; color:#000">DarkSalmon|#E9967A</option>
  <option style="background-color: Violet; color:#000">Violet|#EE82EE</option>
  <option style="background-color: PaleGoldenRod; color:#000">PaleGoldenRod|#EEE8AA</option>
  <option style="background-color: LightCoral; color:#000">LightCoral|#F08080</option>
  <option style="background-color: Khaki; color:#000">Khaki|#F0E68C</option>
  <option style="background-color: AliceBlue; color:#000">AliceBlue|#F0F8FF</option>
  <option style="background-color: HoneyDew; color:#000">HoneyDew|#F0FFF0</option>
  <option style="background-color: Azure; color:#000">Azure|#F0FFFF</option>
  <option style="background-color: SandyBrown; color:#000">SandyBrown|#F4A460</option>
  <option style="background-color: Wheat; color:#000">Wheat|#F5DEB3</option>
  <option style="background-color: Beige; color:#000">Beige|#F5F5DC</option>
  <option style="background-color: WhiteSmoke; color:#000">WhiteSmoke|#F5F5F5</option>
  <option style="background-color: MintCream; color:#000">MintCream|#F5FFFA</option>
  <option style="background-color: GhostWhite; color:#000">GhostWhite|#F8F8FF</option>
  <option style="background-color: Salmon; color:#000">Salmon|#FA8072</option>
  <option style="background-color: AntiqueWhite; color:#000">AntiqueWhite|#FAEBD7</option>
  <option style="background-color: Linen; color:#000">Linen|#FAF0E6</option>
  <option style="background-color: LightGoldenRodYellow; color:#000">LightGoldenRodYellow|#FAFAD2</option>
  <option style="background-color: OldLace; color:#000">OldLace|#FDF5E6</option>
  <option style="background-color: Red; color:#fff">Red|#FF0000</option>
  <option style="background-color: Fuchsia; color:#000">Fuchsia|#FF0080</option>
  <option style="background-color: Magenta; color:#000">Magenta|#FF00FF</option>
  <option style="background-color: DeepPink; color:#000">DeepPink|#FF1493</option>
  <option style="background-color: OrangeRed; color:#000">OrangeRed|#FF4500</option>
  <option style="background-color: Tomato; color:#000">Tomato|#FF6347</option>
  <option style="background-color: HotPink; color:#000">HotPink|#FF69B4</option>
  <option style="background-color: Coral; color:#000">Coral|#FF7F50</option>
  <option style="background-color: DarkOrange; color:#000">DarkOrange|#FF8C00</option>
  <option style="background-color: LightSalmon; color:#000">LightSalmon|#FFA07A</option>
  <option style="background-color: Orange; color:#000">Orange|#FFA500</option>
  <option style="background-color: LightPink; color:#000">LightPink|#FFB6C1</option>
  <option style="background-color: Pink; color:#000">Pink|#FFC0CB</option>
  <option style="background-color: Gold; color:#000">Gold|#FFD700</option>
  <option style="background-color: PeachPuff; color:#000">PeachPuff|#FFDAB9</option>
  <option style="background-color: NavajoWhite; color:#000">NavajoWhite|#FFDEAD</option>
  <option style="background-color: Moccasin; color:#000">Moccasin|#FFE4B5</option>
  <option style="background-color: Bisque; color:#000">Bisque|#FFE4C4</option>
  <option style="background-color: MistyRose; color:#000">MistyRose|#FFE4E1</option>
  <option style="background-color: BlanchedAlmond; color:#000">BlanchedAlmond|#FFEBCD</option>
  <option style="background-color: PapayaWhip; color:#000">PapayaWhip|#FFEFD5</option>
  <option style="background-color: LavenderBlush; color:#000">LavenderBlush|#FFF0F5</option>
  <option style="background-color: SeaShell; color:#000">SeaShell|#FFF5EE</option>
  <option style="background-color: Cornsilk; color:#000">Cornsilk|#FFF8DC</option>
  <option style="background-color: LemonChiffon; color:#000">LemonChiffon|#FFFACD</option>
  <option style="background-color: FloralWhite; color:#000">FloralWhite|#FFFAF0</option>
  <option style="background-color: Snow; color:#000">Snow|#FFFAFA</option>
  <option style="background-color: Yellow; color:#000">Yellow|#FFFF00</option>
  <option style="background-color: LightYellow; color:#000">LightYellow|#FFFFE0</option>
  <option style="background-color: Ivory; color:#000">Ivory|#FFFFF0</option>
  <option style="background-color: White; color:#000">White|#FFFFFF</option>
  <option style="background-color: activeborder; color:#0000ff">activeborder|_CSS_default_color_</option>
  <option style="background-color: activecaption; color:#0000ff">activecaption|_CSS_default_color_</option>
  <option style="background-color: appworkspace; color:#0000ff">appworkspace|_CSS_default_color_</option>
  <option style="background-color: background; color:#fff">background|_CSS_default_color_</option>
  <option style="background-color: buttonface; color:#0000ff">buttonface|_CSS_default_color_</option>
  <option style="background-color: buttonhighlight; color:#0000ff">buttonhighlight|_CSS_default_color_</option>
  <option style="background-color: buttonshadow; color:#0000ff">buttonshadow|_CSS_default_color_</option>
  <option style="background-color: buttontext; color:#fff">buttontext|_CSS_default_color_</option>
  <option style="background-color: captiontext; color:#fff">captiontext|_CSS_default_color_</option>
  <option style="background-color: graytext; color:#0000ff">graytext|_CSS_default_color_</option>
  <option style="background-color: highlight; color:#0000ff">highlight|_CSS_default_color_</option>
  <option style="background-color: highlighttext; color:#0000ff">highlighttext|_CSS_default_color_</option>
  <option style="background-color: inactiveborder; color:#0000ff">inactiveborder|_CSS_default_color_</option>
  <option style="background-color: inactivecaption; color:#0000ff">inactivecaption|_CSS_default_color_</option>
  <option style="background-color: inactivecaptiontext; color:#fff">inactivecaptiontext|_CSS_default_color_</option>
  <option style="background-color: infobackground; color:#0000ff">infobackground|_CSS_default_color_</option>
  <option style="background-color: infotext; color:#fff">infotext|_CSS_default_color_</option>
  <option style="background-color: menu; color:#0000ff">menu|_CSS_default_color_</option>
  <option style="background-color: menutext; color:#fff">menutext|_CSS_default_color_</option>
  <option style="background-color: scrollbar; color:#0000ff">scrollbar|_CSS_default_color_</option>
  <option style="background-color: threeddarkshadow; color:#0000ff">threeddarkshadow|_CSS_default_color_</option>
  <option style="background-color: threedface; color:#0000ff">threedface|_CSS_default_color_</option>
  <option style="background-color: threedhighlight; color:#0000ff">threedhighlight|_CSS_default_color_</option>
  <option style="background-color: threedlightshadow; color:#0000ff">threedlightshadow|_CSS_default_color_</option>
  <option style="background-color: threedshadow; color:#0000ff">threedshadow|_CSS_default_color_</option>
  <option style="background-color: window; color:#0000ff">window|_CSS_default_color_</option>
  <option style="background-color: windowframe; color:#0000ff">windowframe|_CSS_default_color_</option>
  <option style="background-color: windowtext; color:#fff">windowtext|_CSS_default_color_</option>
</select> &nbsp;
</span>
</div  id="idDiv_colorSelects">

<div id="idDiv_fontProp" title="Подбор вариантов значений свойств стиля элемента">
Weight/Style:
<select id="id_slFontWeight" style="font-size: 11;" title="Возможность включения `жирности` символов" onchange="ue_changedFontWeight();">
	<option>_ select Weight _</option>
	<option>normal</option>
	<option>bold</option>
</select>
<select id="id_slFontStyle" style="font-size: 11;" title="Возможность включения `курсива` символов" onchange="ue_changedFontStyle();">
	<option>_ select Style _</option>
	<option>normal</option>
	<option>italic</option>
</select>
&nbsp;
Size (px/%):
<input id="id_tFontSize" type="text" value="" 
	onchange="if (this.value) {elem.style.fontSize=this.value; id_taLog.value += '[set] fontSize=' + this.value +'\n'; view_dataTag();}"
	onKeyPress="if (window.event.keyCode==13) this.onchange();"
	style="{font-family: Arial; font-size: 12;}"
	title="Редактируемое значение для изменения fontSize (применяется после смены фокуса или кл.<Enter>)" 
	size="2"/>
&nbsp;
<select id="id_slFontFamily" style="font-size: 11;" onchange="ue_changedFontFamily();"
	title="Возможность выбора имени фонта - elem.style.fontFamily&#13;&#13;Переход к самой верхней позиции -- удаление данного свойства у элемента" >
	<option>_ select FontFamily _</option>
</select>
</div id="idDiv_fontProp">

<hr>
<input id="id_tExample" type="text" value="Example" 
	style="{font-family: Arial; font-size: 12;}"
	title="Образец применения стиля цветов фона и символов. ..." 
	size="100" readonly />

<hr>
</div id="idDiv_expandEditor">

</div id="idDiv___editorStyle">


<div id="debugConsole" style="BACKGROUND: silver;">
<label title='Отобразить/скрыть раздел с консолью ввода команд'> 
	<input type="checkbox" checked onclick='if (this.checked) idDiv_expandDebug.style.display="block"; else idDiv_expandDebug.style.display="none";' />
	Пользовательские команды для страницы (объект "doc.") или её текущего элемента (объект "elem.")
</label>
<div id="idDiv_expandDebug" style="display:block">

<textarea rows="10" cols="90" id="id_editorCmd" style="{font-size: 11; BACKGROUND: lightgray;}" title="Редактор javascript-команды/скрипта">
// "Отнимаем" от текста outerHtml текст innerHTML
var sOnlyTag=elem.outerHTML; var pos1 = sOnlyTag.indexOf( elem.innerHTML ); 
if (pos1) sOnlyTag = sOnlyTag.substring(0, pos1 );

//// пример просмотра в alert() некоторых свойств узла `elem`
alert( ''
+ '\n\n----doc.title: \t' + doc.title
+ '\n\n----elem.style.color: \t\t' +elem.style.color
+ '\n----elem.currentStyle.color: \t' +elem.currentStyle.color
+ '\n\n----elem.style.background: \t\t' + elem.style.background
+ '\n----elem.style.backgroundColor: \t' + elem.style.backgroundColor
+ '\n----elem.currentStyle.backgroundColor: \t' +elem.currentStyle.backgroundColor
+ '\n\n----elem.currentStyle.fontFamily: \t' +elem.currentStyle.fontFamily
+ '\n\n----elem.currentStyle.display: \t' + elem.currentStyle.display
+ '\n----elem.currentStyle.visibility: \t' + elem.currentStyle.visibility
+ '\n\n----elem.nodeName: \t\t' + elem.nodeName
+ '\n----elem.parentNode.nodeName: \t' + elem.parentNode.nodeName
+ '\n\n----only tag:\n' + sOnlyTag
);

//// пример вывода значений в текст протокола (id_taLog.value):
// id_taLog.value += '\n----elem.currentStyle.fontFamily = ' +elem.currentStyle.fontFamily+'\n'

</textarea>
<input type=button value="Run command" 
	onclick="id_taLog.value += '\n[Run Script]\n'+id_editorCmd.value+'\n\n[Return] '+eval(id_editorCmd.value)+'\n'; if ( confirm('Reload data?')) {window.location.reload(false); view_dataTag();}" 
	style="{font-family: Arial; font-size: 11;}" title="Запуск введённой команды">
&nbsp;
<input type=button value="Clear" 
	onclick="id_editorCmd.value='';" 
	style="{font-family: Arial; font-size: 11;}" title="Очистка редактора пользовательских команд">
&nbsp;
Templates:
<select onchange="if (this.selectedIndex) id_editorCmd.value=this.value;" style="{font-size: 11; BACKGROUND: lightgray;}" >
	<option value="" title="Выбор шаблона скрипта для вставки в редактор">___ select_script_template ___</option>
	<option value=
"// В переменной `cmd` прописываем путь к запрашиваемому свойству объекта `elem` / `doc`
// примеры написания пути и имени свойства:
//   'elem [ \'tagName\' ]'
//   'elem [ \'currentStyle\' ][ \'fontFamily\' ]'
//   'elem [ \'parentNode\' ][ \'nodeName\' ]'

var cmd = 'elem [ \'tagName\' ]' ;  // команда запроса property
var ret = eval( cmd );              // выполнение команды
alert( cmd + '\n\n' + ret );        // отображение команды и результата её выполнения"
		title="Пример написания скрипта для отображения свойства объекта или даже свойства подобъекта объекта">
		Запрос указанного в тексте свойства объекта</option>
	<option value=
"var sRows=prompt('Enter `rows` value:', elem.rows); if (sRows) elem.rows=sRows;
var sCols=prompt('Enter `cols` value:', elem.cols); if (sCols) elem.cols=sCols;" 
		title="Подбор значений размера области TEXTAREA.&#13;&#13;<Cancel>-отказ от изменения свойства">
		Запрос-изменение аттрибутов rows,cols (для TEXTAREA)</option>
	<option value="var sSize=prompt('Enter `size` value:', elem.size); if (sSize) elem.size=sSize;" 
		title="Подбор значений размера области INPUT text.&#13;&#13;<Cancel>-отказ от изменения свойства">
		Запрос-изменение аттрибута `size` (для INPUT)</option>
	<option value="var sValue=prompt('Enter `value` value:', elem.value); if (sValue) elem.value=sValue;" 
		title="Подбор значений `value` INPUT text/button.&#13;&#13;<Cancel>-отказ от изменения свойства">
		Запрос-изменение аттрибута `value` (для INPUT)</option>
	<option value="var sWidth=prompt('Enter `width` value:', elem.width); if (sWidth) elem.width=sWidth;" 
		title="Подбор значений `width`.&#13;&#13;<Cancel>-отказ от изменения свойства">
		Запрос-изменение аттрибута `width` (для TD/TH/SPAN)</option>
	<option value=
"var sBGColor=prompt('Enter background-color name:', elem.style.background); if (sBGColor) elem.style.background=sBGColor;
var sColor = prompt ('Enter font color name:', elem.style.color); if (sColor) elem.style.color=sColor;" 
		title="Ввод значений цветов фона и смиволов.&#13;&#13;<Cancel>-отказ от изменения свойства">
		Запрос-изменение style-аттрибутов background,color</option>
	<option value=
"//// запись значения в outerHTML, после команды надо перезапускать `IE_outerHtml`

elem.outerHTML=ta_outer.value;  // запись изменённого в textarea значения в объект

alert('Будет выполнено закрытие утилиты `IE_outerHtml`'); window.close();" 
		title='Запись значения в elem.outerHTML, после команды надо перезапускать приложение "IE_outerHtml"'>
		Применение отредактированного значения outerHTML</option>
	<option value="
//// ___ исследование свойств указанного объекта `elem[....]` ___

var prop='currentStyle'; prop=prompt('Please enter your properties name',prop);

// получение указанного подобъекта `elem` (или объект родит.окна `doc` по CANCEL).
var obj; if (prop) obj=elem[prop]; else obj=doc;

var txt = ''; // формирование строки с перечнем свойств
for (var propertyName in obj) { var val=obj[propertyName]; if ((val) && (val!='null')) txt += '\t'+propertyName+ ' = ' +val+ ' ~|~'; } 

// вызов Modelles-диалога для просмотра/копирования
var name = obj['nodeName']; if ((!name)||(name=='undefined')) name=prop;
var arr1 = txt.split('~|~'); arr1.sort(); txt=arr1.join('\n');
uf_openModelles('view properties (without null/blank) of '+name,txt);
" 
		title="Запрос имени свойства-объекта и вывод его свойств.&#13;&#13;<Cancel>-свойства родительского документа-объекта">
		Свойства указанного объекта `elem[....]`</option>
</select>

</div id="idDiv_expandDebug">

<hr>
</div id="debugConsole">


<p id="p_btns_close_about_div_log" align="left">
	<input type=button value="Close" onclick="window.close();" style="{font-family: Arial; font-size: 11;}" 
		title="Закрытие окна">
	<input type=button value="О программе" onclick="ue_about();" style="{font-family: Arial; font-size: 11;}" 
		title="Сведения о программе">

	<!-- ==== Log ==== -->

	<label title='Отобразить/скрыть раздел с протоколом действий'> 
		<input type="checkbox" onclick='if (this.checked) idDiv_expandLog.style.display="block"; else idDiv_expandLog.style.display="none";' />
		<b>action report</b>
		<hr>
	</label>
	<div id="idDiv_expandLog" style="display:none">
		<textarea rows="30" cols="105" id="id_taLog" style="{ font-Size: 11px; font-Family: Calibri; BACKGROUND: lightsteelblue;}"></textarea>
	</div id="idDiv_expandLog">
</p>


<!-- 
// --- создаём опции id_slFontFamily с перечнем фонтов
// from: http://stackoverflow.com/questions/3368837/list-every-font-a-users-browser-can-display
 -->
<script>
function getFonts() { // вызывается в BODY.onload
	var nFontLen = dlgHelper.fonts.count;
	var rgFonts = new Array();
	for ( var i = 1; i < nFontLen + 1; i++ )
			rgFonts[i] = dlgHelper.fonts(i); 
	rgFonts.sort();
	var iOpt=1;
	for ( var j = 0; j < nFontLen; j++ ) {
		// document.write( rgFonts[j] + "<BR>" );
		var option0 = new Option( rgFonts[j], rgFonts[j]);
		id_slFontFamily.options [iOpt] = option0;
		iOpt++;
	}
}
</script>
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>



<!-- =================================== JScript ==============================================  -->
<script language="JavaScript">

var parentwin;
var doc;  // родительское окно
var elem; // текущий (обрабатываемый) элемент родительского окна. Изначально тот, на котором выполняли выделение
var onloadElem; // стартовый элемент родительского окна - тот, на котором выполняли выделение

var elemPrevCode = ""; // изначальное состояние elem.outerHTML, используется для проверки наличия изменений
var gi_prevParentOptionIndex = 0; // номер последней используемой опции выбора родителя (нужен в событии смены выбора)

var ta_outer = document.all.id_editorOuter; // объект textarea `document.all.id_editorOuter`


// отрабатывает при открытии окна - получение значений из "вызвавшей" страницы
function Window_OnLoad()
{
	parentwin = external.menuArguments;     // получаем объект окна
	doc = parentwin.document;               // получаем объект документа
	elem = doc.selection.createRange ().parentElement ();
	
	// протоколирование
	id_taLog.value += '[Start] doc.title=' + doc.title + '\n';
	
	// в слое "idDiv_colorSelects" в "innerHTML" есть элементы для выбора и смены цвета BACKGROUND объекта,
	// берём этот код, подменяем в нём 'Bg' на 'Font' (меняются ID и имя функции onchange)
	// и дописываем в слой "idDiv_colorSelects", т.о. добавлем ещё и select выбора цвета символов в объекте
	var html_slFontColor = idDiv_colorSelects.innerHTML;
	html_slFontColor = str_replace('Bg', 'Font', html_slFontColor);
	html_slFontColor = str_replace('select_background-', 'select_font-', html_slFontColor);
	idDiv_colorSelects.insertAdjacentHTML ('beforeEnd', html_slFontColor);

	// отображение данных по текущему узлу
	view_dataTag();
	
	// список родительских элементов
	uf_createParentOptions();
	
		// получение списка фонтов системы
	getFonts();
	
	id_btViewProp.focus();
}

// Формирование списка узлов-предков в последовательности: сверху - предок, ниже - потомок
function uf_createParentOptions(){
	onloadElem = elem; // стартовый элемент родительского окна (нужен будет при переходах на родительские элементы)
	
	// удаление опций выбора "предков" (кроме самой первой опции)
	for (var i=id_slParents.length; i>1; i--) id_slParents.remove ( i - 1);

	
	// сначала тексты сформированых опций формируются в одной строке, 
	// потом строка преобразовывается в массив и создаются опции из элементов массива (в обратном порядке перечисления)
	var sOptions = ""; 
	var sDelim = "`~|~`"; // комбинация символов для разделения опций дописываемых в строку
	var parElem = elem;
	var currNodename = "";
	do {
		sOptions += sDelim + uf_createNodeOption( parElem ); // создание текста опции и добавление его в `sOptions`
		parElem = parElem.parentNode;
		currNodename = "";
		try {
			currNodename = parElem.nodeName
		} catch(e) {}
	} while (currNodename) // до тех пор, пока существует понятие имени объекта-предка 
	var arrayOfStrings = sOptions.split(sDelim);
	var iOpt=1;
	for (var i=arrayOfStrings.length-1; i>=1; i--) // добавление опций в обратном порядке
	{
		var sCurOpt = arrayOfStrings[i];
		var sIdx = "";
		if (sCurOpt.indexOf(':')==0) {
			sIdx = sCurOpt.substring(1, sCurOpt.indexOf('.') );
		}
		var option0 = new Option( sCurOpt, sIdx); //в качестве значения - индекс узла (может в будущем пригодится для перехода к опции после перехода к узлу)
		id_slParents.options [iOpt] = option0;
		iOpt++;
	}
	gi_prevParentOptionIndex = iOpt - 1;
	id_slParents.selectedIndex = gi_prevParentOptionIndex;
	id_taLog.value += '\n[Start option] ' + id_slParents.value + '\n';
}

// --- создание текста для опции выбора узла (parentNode/childNodes), на основании данных переданного Node
function uf_createNodeOption( pNode ) {
	var sAdd = ""; 
	if (pNode.sourceIndex) sAdd += ':' + pNode.sourceIndex + '. ';
	sAdd += pNode.nodeName;
	switch( pNode.nodeType ) {
		case 1:
			if (pNode.tagName == 'TR') {
				sAdd += '  row # ' + pNode.rowIndex;
			}
			if ((pNode.tagName == 'TD') || (pNode.tagName == 'TH')) {
				sAdd += '  cell # ' + pNode.cellIndex;
				if (pNode.rowSpan>1) sAdd += ' rowSpan=' + pNode.rowSpan;
				if (pNode.colSpan>1) sAdd += ' colSpan=' + pNode.colSpan;
			}
			if ((pNode.nodeName != 'HTML')&&(pNode.nodeName != 'BODY')&&(pNode.nodeName != 'TBODY')){
				if (pNode.type) sAdd += ' ' + pNode.type;
				if (pNode.id) sAdd += '  [' + pNode.id + ']';
				if (pNode.name) sAdd += '  name=' + pNode.name;
				if (pNode.title) sAdd += '  title=' + pNode.title;
				if (pNode.language) sAdd += '  lng=' + pNode.language;
				if (pNode.src) sAdd += '  src=' + pNode.src;
				if (pNode.currentStyle.display) if (pNode.currentStyle.display=='none') sAdd += '  :NODISP ';
				if (pNode.currentStyle.visibility) if (pNode.currentStyle.visibility=='hidden') sAdd += '  :HIDE ';
				// последним добавляем - имеющийся в узле текст
				if (pNode.innerText) sAdd += '  • ' + pNode.innerText;
			}
			break;
		case 3: // #text
			if (pNode.nodeValue) sAdd += '  • ' + pNode.nodeValue;
			break;
		case 8: // #comment
			if (pNode.data) sAdd += '  • ' + pNode.data;
			break;
	}
	// убираем перевод строки и обрезаем до 90 символов.
	sAdd = str_replace("\r\n", "_ ", sAdd);
	sAdd = str_replace("\n", "_ ", sAdd);
	sAdd = str_replace("\r", "_ ", sAdd);
	sAdd = str_replace("_ _ ", "_ ", sAdd);
	sAdd = str_replace("_ _ ", "_ ", sAdd);
	sAdd = str_replace("  ", " ", sAdd);
	sAdd = str_replace("  ", " ", sAdd);
	sAdd = str_replace("  ", " ", sAdd);
	return str_truncate(sAdd, 90);
}

// Создание опций выбора вариантов nodeName, существующих в документе  - SELECT `id_slNodeName`
function  uf_createNodeNameOptions() {
	var sNodes = ",";
	var sNames = ",";
	var arr1, j;
	
	for (var i=0; i<doc.all.length; i++)
	{
		var currNode = doc.all[i].nodeName; 
		// проверяем ещё и наличие "type"
		var currType = doc.all[i].type; 
		if (currType) currNode += '.' + currType;
		if (sNodes.indexOf(','+currNode+',')<0) sNodes += currNode + ",";
		// name
		var currName = doc.all[i].name;
		if (currName) {
			if (sNames.indexOf(','+currName+',')<0) sNames += currName + ",";
		}
		
		
	}

	// создаём опции для выбора узлов по nodeName
	arr1 = sNodes.split(','); arr1.sort(); 
	j=1; // index `id_slNodeName`
	for (var i = 0; i<arr1.length; i++)
		if (arr1[i]) {
			var option0 = new Option( arr1[i], arr1[i]);
			id_slNodeName.options [j] = option0;
			j++;
		}
	
	// создаём опции для выбора узлов по name
	arr1 = sNames.split(','); arr1.sort(); 
	j=1; // index `id_slObjName`
	for (var i = 0; i<arr1.length; i++)
		if (arr1[i]) {
			var option0 = new Option( arr1[i], arr1[i]);
			id_slObjName.options [j] = option0;
			j++;
		}
	
}

// Функция вызываемая после смены выбора фильтра 
// параметр1 - id объекта SELECT, у которого произошло событие
// параметр2 - value объекта SELECT, у которого произошло событие
function ue_changedFilter(paramId, paramValue) {
	
	// удаление опций выбора ранее отобранных узлов (кроме самой первой опции)
	for (var i=id_slFilteredNodes.length; i>1; i--) id_slFilteredNodes.remove ( i - 1);
	
	// добавление опций
	
	if (paramId=='id_slNodeName') {
		id_taLog.value += '\n\nselection nodeName = ' + paramValue;
		var arr1 = paramValue.split('.');
		var sName = arr1[0]; // Имя узла из опции
		var sType = ""; if (arr1[1]) sType=arr1[1]; // тип узла из опции (если был указан)
		var iOpt=1;
		for (var i=0; i<doc.all.length; i++)
		{
			var currNode = doc.all[i].nodeName;
			var currType = ""; if (doc.all[i].type) currType=doc.all[i].type;
			if ((currNode==sName) && (currType==sType)) {
				var sCurOpt = uf_createNodeOption( doc.all[i] ); // создание текста опции
				var sIdx = doc.all[i].sourceIndex;
				//в качестве значения - индекс узла (может в будущем пригодится для перехода к опции после перехода к узлу)
				var option0 = new Option( sCurOpt, sIdx);
				id_slFilteredNodes.options [iOpt] = option0;
				iOpt++;
			}
		}
	} else // 'id_slObjName' 
	{
		var arrNodes = new Array();  
		arrNodes = doc.getElementsByName(paramValue);
		id_taLog.value += '\n\ndoc.getElementsByName("' + paramValue + '")';
		id_taLog.value += '\narrNodes.length=' + arrNodes.length;
		var iOpt=1;
		for (var i = 0; i < arrNodes.length; i++) { 
			// var obj = doc.getElementsByName(paramValue).item(i);
			var obj = arrNodes[i];
			id_taLog.value += '\narrNodes[' + i + '].sourceIndex=' + obj.sourceIndex;
			var sCurOpt = uf_createNodeOption( obj ); // создание текста опции
			var sIdx = obj.sourceIndex;
			var option0 = new Option( sCurOpt, sIdx);
			id_slFilteredNodes.options [iOpt] = option0;
			iOpt++;
		}
	}
	// отображаем количество отфильтрованных узлов и переходим к первому
	idSpn_NumberOfFilteredNodes.innerText = iOpt - 1; 
	id_taLog.value += '\nnumber of options = ' + idSpn_NumberOfFilteredNodes.innerText;
	if (iOpt>1) id_slFilteredNodes.selectedIndex=1; else id_slFilteredNodes.selectedIndex=0;
	id_slFilteredNodes.onchange();
	
}

// Функция вызываемая после смены текущего узла в DOM, после смены свойств/аттрибутов, 
// после выполнения команды в Debug-консоли.
// Действия:
//  - заполняет таблицу с свойствами
//  - формирует опции выбора в списке "детей"
//  - формирует опции выбора в списке свойств
//  - запрашивает у элемента некоторые элементы стиля и применяет их к объекту тестового отображения свойств стиля
//  - выставляет соответствующие свойствам стиля позиции в списках выбора цветов и т.п.
function view_dataTag() {
	// очистка значений в таблице
	idElem_tagName.innerText         = "*";
	idElem_id.innerText              = "*";
	idElem_idx_current.innerText     = "*";
	idElem_idx_parent.innerText      = "*";
	idElem_parentNode.innerText      = "*";
	idElem_title.innerText           = "*";
	idTd_Name.innerText = "*";
	
	// удаление опций выбора "детей" (кроме самой первой опции)
	for (var i=id_slChilds.length; i>1; i--) id_slChilds.remove ( i - 1);
	idSpn_NumberOfChilds.innerText = "0";

	// удаление опций выбора свойств (кроме самой первой опции)
	for (var i=id_slPropObject.length; i>1; i--) id_slPropObject.remove ( i - 1);
	
	// пробуем запрашивать аттрибуты объекта и заносить данные на элементы формы
	try {
		idElem_tagName.innerText = elem.nodeName; // выбираем не tagName, а nodeName, т.к. в качестве узлов могут быть не тоьллко теги.
		if (elem.type) idElem_tagName.innerText += ' ' + elem.type;
		if (elem.parentNode) idElem_parentNode.innerText = elem.parentNode.nodeName;
		if (elem.parentNode.id) idElem_parentNode.innerText += '\n[' + elem.parentNode.id + ']';
		if (elem.id) idElem_id.innerText = elem.id;
		if (elem.sourceIndex) idElem_idx_current.innerText = elem.sourceIndex;
		if (elem.parentNode.sourceIndex) idElem_idx_parent.innerText = elem.parentNode.sourceIndex;
		if (elem.title) idElem_title.innerText = elem.title;
		if (elem.name) idTd_Name.innerText = elem.name
		sOuter = elem.outerHTML; // код элемента считываем из браузера
		elemPrevCode = sOuter;
		ta_outer.value = sOuter;
		//--- добавление новых опций выбора свойств (через try(), т.к. для тега OPTION получаем ошибку выполнения)
		var txt = ''; // формирование строки с перечнем свойств
		for (var propertyName in elem) { 
			var val=elem[propertyName]; if (val=='[object]') txt += propertyName+'~'; 
		} 
		var arr1 = txt.split('~'); arr1.sort(); 
		var j=1; // index id_slPropObject
		for (var i = 0; i<arr1.length; i++)
			if (arr1[i]) {
				var option0 = new Option( arr1[i], arr1[i]);
				id_slPropObject.options [j] = option0;
				j++;
			}
		//-----
	} catch(e) {}
	
	// если имеется индекс, то пробуем его поискать среди значиний списка предков
	if (idElem_idx_current.innerText>0) {
		for (var i=1; i<id_slParents.length; i++) {
			if (id_slParents.options[i].value==idElem_idx_current.innerText) id_slParents.selectedIndex = i;
		}
	}

	if (ta_outer.value=='undefined') {
		if (elem.nodeName === "#text") {
			ta_outer.value = elem.nodeValue;
			};
		return; // прерываем выполнение
	}
	
	// добавление новых опций с "детьми"
	for (var i = 0; i<elem.childNodes.length; i++) {
		var txt = uf_createNodeOption( elem.childNodes[i] );
		var option0 = new Option( txt, txt);
		id_slChilds.options [i + 1] = option0;
	}
	if (elem.childNodes.length) idSpn_NumberOfChilds.innerText = elem.childNodes.length;

		
	// --- стиль текущего элемента применяем к тестовому полю "id_tExample"
	id_tExample.title = "Образец применения стиля цветов фона и символов.\n\nДанные о стиле взяты из:" // &#13; `elem.style`
	id_tExample.style.background='#ffffff';
	id_tExample.style.color='#000000';
		
	try {
		if (elem.style.backgroundColor) {
			id_tExample.style.background=elem.style.backgroundColor;
			id_tExample.title += '\nelem.style.backgroundColor';
		}
		else {
			if (elem.style.background) {
				id_tExample.style.background=elem.style.background;
				id_tExample.title += '\nelem.style.background';
			} else
			if (elem.bgColor) {
				id_tExample.style.background=elem.bgColor;
				id_tExample.title += '\nelem.bgColor';
			}
		}
		if (elem.style.color) {
			id_tExample.style.color=elem.style.color;
			id_tExample.title += '\nelem.style.color'
		}
		id_tExample.value = 'Example { background: ' + id_tExample.style.background + '; color: ' + id_tExample.style.color+'; '
		///// bold/italic/size/family
		id_tExample.style.fontWeight='normal';
		id_tExample.style.fontStyle='normal';
		id_tExample.style.fontSize='100%';
		if (elem.style.fontWeight) {id_tExample.style.fontWeight=elem.style.fontWeight; id_tExample.value += 'font-Weight: ' + elem.style.fontWeight + '; '; }
		if (elem.style.fontStyle)  {id_tExample.style.fontStyle =elem.style.fontStyle;  id_tExample.value += 'font-Style: '  + elem.style.fontStyle  + '; '; }
		if (elem.style.fontSize)   {id_tExample.style.fontSize  =elem.style.fontSize;   id_tExample.value += 'font-Size: '   + elem.style.fontSize  + '; '; id_tFontSize.value=elem.style.fontSize;}
		if (elem.style.fontFamily) {id_tExample.style.fontFamily=elem.style.fontFamily; id_tExample.value += 'font-Family: ' + elem.style.fontFamily  + '; '; }
		//
		id_tExample.value += '}';
	} catch(e) {}
	
	// --- установка позиций в списках цветов согласно текущих стилей
	
	// смена позиции в віборе цвета фона - id_slBgColor
	var currBgColor = id_tExample.style.background.toUpperCase();
	if (currBgColor!='#FFFFFF')
	{
		for (var i=1; i<id_slBgColor.length; i++) {
			var txt = id_slBgColor.options[i].text;
			var arr = txt.split('|');
			if ( (arr[0].toUpperCase()==currBgColor) || (arr[1].toUpperCase()==currBgColor) ) {
				id_slBgColor.selectedIndex = i;
				break;
			}
		}
	} else id_slBgColor.selectedIndex = 0;
	
	// смена позиции в віборе цвета символов - id_slFontColor
	var currFontColor = id_tExample.style.color.toUpperCase();
	if (currFontColor!='#000000')
	{
		for (var i=1; i<id_slFontColor.length; i++) {
			var txt = id_slFontColor.options[i].text;
			var arr = txt.split('|');
			if ( (arr[0].toUpperCase()==currFontColor) || (arr[1].toUpperCase()==currFontColor) ) {
				id_slFontColor.selectedIndex = i;
				break;
			}
		}
	} else id_slFontColor.selectedIndex = 0;
	
	// смена позиции в віборе FontWeight
	var currFontWeight = id_tExample.style.fontWeight.toUpperCase();
	for (var i=1; i<id_slFontWeight.length; i++) {
		var txt = id_slFontWeight.options[i].text;
		if ( txt.toUpperCase()==currFontWeight ) id_slFontWeight.selectedIndex = i;
	}
	
	// смена позиции в віборе FontStyle
	var currFontStyle = id_tExample.style.fontStyle.toUpperCase();
	for (var i=1; i<id_slFontStyle.length; i++) {
		var txt = id_slFontStyle.options[i].text;
		if ( txt.toUpperCase()==currFontStyle ) id_slFontStyle.selectedIndex = i;
	}
	
	// установка позиции в select - id_slFontFamily
	var currFontFamily = id_tExample.style.fontFamily.toUpperCase();
	for (var i=1; i<id_slFontFamily.length; i++) {
		var txt = id_slFontFamily.options[i].text;
		if ( txt.toUpperCase()==currFontFamily ) id_slFontFamily.selectedIndex = i;
	}
	
	// протоколирование значений
	id_taLog.value += '\n[Refresh] elem.tag=' + idElem_tagName.innerText;
	if (idElem_id.innerText!='*') id_taLog.value += '  .id='+ idElem_id.innerText;
	if (idTd_Name.innerText!='*') id_taLog.value += '  name='+idTd_Name.innerText;
	id_taLog.value += '\n';
	if (idElem_title.innerText!='*') id_taLog.value += '[Refresh] title=' + idElem_title.innerText +'\n';
	if (id_tExample.value!='Example { background: #ffffff; color: #000000; }') id_taLog.value += '[get style] ' + id_tExample.value +'\n';
	
}

// --- событие выбора свойства объекта - вывод в окне данных по свойствам свойства-объекта
function ue_changedProp() {
	if (id_slPropObject.selectedIndex) {
		var prop=id_slPropObject.value;
		var obj=elem[prop];
		var txt=''; 
		for (var propertyName in obj) {
			var indent;
			var val=obj[propertyName]; 
			if ((val)&&(val!='null')) indent = '\t'; else indent = '\t» (empty)\t' // для визуального отделения пустых начений
			txt+= indent + propertyName +' = '+val+' ~|~';
		} var name=obj['nodeName']; if ((!name)||(name=='undefined')) name=prop;
		var arr1 = txt.split('~|~'); arr1.sort(); txt=arr1.join('\n');
		uf_openModelles('view all properties of object<br><b>'+ elem['nodeName']+'[' +name+']</b>' ,txt);
		id_taLog.value += '[View Property-Object] ' + prop +'\n';
	}
}

// --- событие выбора цвета фона - установка цвета фона у элемента (либо удаление данного свойства)
function ue_changed_slBgColor(){
	var idx=id_slBgColor.selectedIndex;
	var sColor=id_slBgColor.options[idx].text;
	if (idx)
	{
		var arr1=sColor.split('|');
		elem.style.background=arr1[0];
		id_taLog.value += '[set] background=' + arr1[0] +'\n';
	}
	else
	{
		if (elem.style.removeProperty) {
			elem.style.removeProperty ("background-color");
    } 
    else {
      elem.style.removeAttribute ("backgroundColor");
    }
	}
	view_dataTag();
}

// --- событие выбора цвета символов - установка цвета символов у элемента (либо удаление данного свойства)
function ue_changed_slFontColor(){
	var idx=id_slFontColor.selectedIndex;
	var sColor=id_slFontColor.options[idx].text;
	if (idx)
	{
		var arr1=sColor.split('|');
		elem.style.color=arr1[0];
		id_taLog.value += '[set] color=' + arr1[0] +'\n';
	}
	else
	{
		if (elem.style.removeProperty) {
			elem.style.removeProperty ("color");
    } 
    else {
      elem.style.removeAttribute ("color");
    }
	}
	view_dataTag();
}

// --- событие выбора "жирности" символов
function ue_changedFontWeight(){
	var idx=id_slFontWeight.selectedIndex;
	var txt=id_slFontWeight.options[idx].text;
	if (idx)
	{
		elem.style.fontWeight=txt;
		id_taLog.value += '[set] fontWeight=' + txt +'\n';
		view_dataTag();

	}
}

// --- событие выбора курсива символов
function ue_changedFontStyle(){
	var idx=id_slFontStyle.selectedIndex;
	var txt=id_slFontStyle.options[idx].text;
	if (idx)
	{
		elem.style.fontStyle=txt;
		id_taLog.value += '[set] fontStyle=' + txt +'\n';
		view_dataTag();
	}
}

// --- событие выбора названия фонта - установка elem.style.fontFamily элемента (либо удаление данного свойства)
function ue_changedFontFamily() {
	var idx=id_slFontFamily.selectedIndex;
	if (idx) {
		elem.style.fontFamily=id_slFontFamily.options[idx].text;
		id_taLog.value += '[set] fontFamily=' + id_slFontFamily.options[idx].text +'\n';
	} else {
		if (elem.style.removeProperty) {
			elem.style.removeProperty ("font-Family");
    } 
    else {
      elem.style.removeAttribute ("fontFamily");
    }
	}
	view_dataTag();
	
}


function ue_changedParent() {

	if (id_slParents.selectedIndex==0) {
		// была выбрана первая опция с коментарием, задающим длину строк
		id_slParents.selectedIndex = gi_prevParentOptionIndex;
	} 
	else {
		var iMoving = id_slParents.options.length - 1 - id_slParents.selectedIndex;
		id_taLog.value += '\n[change of Parents-node] number of steps (from the bottom of the list) # ' + iMoving +'\n';
		id_taLog.value += 'Parents option: ' + id_slParents.value +'\n';
		// переход к стартовому элементу и от него "поднимаемся" на iMoving "родителей"
		elem = onloadElem;
		while (iMoving > 0) {
			elem = elem.parentNode;
			iMoving--;
		}
		gi_prevParentOptionIndex = id_slParents.selectedIndex; 
		view_dataTag();
	}
}

function ue_changedChild() {
	// номер "дитяти"
	var iMoving = id_slChilds.selectedIndex
	
	if (iMoving>0) {
		// был выбор не равный верхнему, нужно выполнить: 
		// - перейти к "дитю" по номеру ;
		// - определить элемент как "стартовый";
		// - если текущий выбор в "родителях" не самый нижний, то удалить все последующие опции;
		// - добавить к родителям новый элемент и установить его текущим выбором (onchange);
		
		id_taLog.value += '[Go to Childs-node] node number # ' + iMoving +'\n';

		elem = elem.childNodes[iMoving - 1]; // переход к дитю
		onloadElem = elem; // новый элемент в стартовый объект
		
		// удаление опций выбора "родителей", 
		// которые были в списке ниже элемента того, с которого ушли в "дитё"
		for (var i=id_slParents.length - 1 ; i>id_slParents.selectedIndex; i--) id_slParents.remove (i);
		
		// добавление новой опции
		var txt = id_slChilds.options[iMoving].text
		var option0 = new Option( txt, txt);
		id_slParents.options [id_slParents.length] = option0;
		
		id_slParents.selectedIndex = id_slParents.length - 1; // устанавливаем выбор на добавленный пункт
		id_slParents.onchange(); // вызов события смены родителя на новом пункте
	
	};
}


// Вывод в Моделесс-окно данных
function uf_openModelles(pTitle,pStrings){
	MyWindow = showModelessDialog("about:blank",window,"dialogWidth:490px;dialogHeight:500px;resizable:1;scroll:1;status:0;center:0;");
	MyWindow.document.writeln( 
		'<div align=center style="{font-size: 12;background-color:whitesmoke;}">' + pTitle + 
		'<br><TEXTAREA id=MW_ta cols=93 rows=30 readonly ' +
		'style="{font-family: Arial; font-size: 11;background-color:whitesmoke;}"></TEXTAREA><br>');
	MyWindow.document.all.MW_ta.value = pStrings;
	MyWindow.document.writeln('<input id=MW_bt type=submit value="CLOSE ModellesDialog" '+
		'onclick="window.close();" style="{font-family: Arial; font-size: 10;}"></div>');
	MyWindow.document.all.MW_bt.focus();
}

// str_replace("что заменяем", "чем заменяем", "исходная строка")
// from - http://www.web-utils.net/javascript/string-replace
function str_replace(search, replace, subject) {
	return subject.replace(new RegExp (search, 'g'), replace);
}

// str_truncate("исходная строка", макс.длина) - усечение строки
// from - http://learn.javascript.ru/task/usechenie-stroki

function str_truncate(str, maxlength) {
  if (str.length > maxlength) {
    return str.slice(0, maxlength - 1) + '…';
  }
  return str;
}


// Окно просмотра сведений о программе
function ue_about(){
	try { 
		aboutWin = open("", "displayWindow", ""); 
		aboutWin.document.open(); 
		aboutWin.document.write('<html><head><title>About IE_outerHtml.htm</title>');
		aboutWin.document.write('<style>body {background-color:buttonface; font-family: Arial; font-size: 13;}'); 
		aboutWin.document.write('</style></head><body>'); 
		aboutWin.document.write('<h4>'); 
		aboutWin.document.write( document.title ); 
		aboutWin.document.write('</h4><hr>'); 
		aboutWin.document.write('Программа сканирования свойств объектов открытой в Internet Explorer страницы либо объектов работающего HTA-приложения.<br>'); 
		aboutWin.document.write('Вызов программы - через контекстное меню "Viewer outerHtml" после выделения на странице интересующего объекта.<br><br>'); 
		aboutWin.document.write('Для добавления (или удаления) из контекстного меню Internet Explorer данного пункта меню - выполните скрипт "IE_outerHtml_setup.vbs".'); 
		aboutWin.document.write('<hr><br>'); 
		aboutWin.document.write('Описание алгоритма работы смотрите на странице google-сайта автора: '); 
		aboutWin.document.write('<a href="https://sites.google.com/site/scripttools/home/context-menu-for-ie/ie_outerhtml">sites.google.com/site/scripttools</a>'); 
		aboutWin.document.write('<br><br>(c) Roman Gerashchenko, rgv15@list.ru ');
		aboutWin.document.write('<a href="mailto:rgv15@list.ru?subject=IE_outerHtml&body=Hello!">[mailto]</a>');
		aboutWin.document.write("</body></html>"); 
			
	} catch (error){ }
}

</SCRIPT>

</body>

</html>